<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.container {
				width: 98%;
				margin: 0 auto;
			}

			.container div {
				box-sizing: border-box;
				height: 300px;
				border: 5px solid black;
				float: left;
			}

			@media screen and (min-width: 1200px) {
				.container .col12 {
					width: calc(100% / 12);
				}
			}

			@media screen and (min-width: 900px) and (max-width: 1200px) {
				.container .col6 {
					width: calc(100% / 6);
				}
			}

			@media screen and (min-width: 600px) and (max-width: 900px) {
				.container .col3 {
					width: calc(100% / 3);
				}
			}

			@media screen and (max-width: 600px) {
				.container .col {
					width: calc(100%);
				}
			}


		</style>
	</head>
	<body>
		
		<div class="container">
			
			<div class="col col3 col6 col12"></div>
			<div class="col col3 col6 col12"></div>
			<div class="col col3 col6 col12"></div>
			<div class="col col3 col6 col12"></div>
			<div class="col col3 col6 col12"></div>
			<div class="col col3 col6 col12"></div>
			<div class="col col3 col6 col12"></div>
			<div class="col col3 col6 col12"></div>
			<div class="col col3 col6 col12"></div>
			<div class="col col3 col6 col12"></div>
			<div class="col col3 col6 col12"></div>
			<div class="col col3 col6 col12"></div>

		</div>


	</body>
</html>